<template>
  <div class="product">
    <product-parma :title="product.name">
      <template v-slot:buy>
        <button class="btn" @click="buy">立即购买</button>
      </template>
    </product-parma>
    <div class="content">
      <div class="item-bg">
        <h2>{{ product.name }}</h2>
        <h3>{{ product.subtitle }}</h3>
        <p>
          <a href="javascript:;" id="">全球首款双频 GP</a>
          <span>|</span>
          <a href="javascript:;" id="">骁龙845</a>
          <span>|</span>
          <a href="javascript:;" id="">AI 变焦双摄</a>
          <span>|</span>
          <a href="javascript:;" id="">红外人脸识别</a>
        </p>
        <div class="price">
          <span
            >￥<em>{{ product.price }}</em></span
          >
        </div>
      </div>
      <div class="item-bg-2"></div>
      <div class="item-bg-3"></div>
      <div class="item-swiper">
        <swiper :options="swiperOption">
          <swiper-slide
            ><img src="/imgs/product/gallery-2.png" alt=""
          /></swiper-slide>
          <swiper-slide
            ><img src="/imgs/product/gallery-3.png" alt=""
          /></swiper-slide>
          <swiper-slide
            ><img src="/imgs/product/gallery-4.png" alt=""
          /></swiper-slide>
          <swiper-slide
            ><img src="/imgs/product/gallery-5.jpg" alt=""
          /></swiper-slide>
          <swiper-slide
            ><img src="/imgs/product/gallery-6.jpg" alt=""
          /></swiper-slide>
          <!-- Optional controls -->
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
        <p class="desc">小米9 AI变焦双摄拍摄</p>
      </div>
      <div class="item-video">
        <h2>60帧超慢动作摄影<br />慢慢回味每一瞬间的精彩</h2>
        <p>
          后置960帧电影般超慢动作视频，将眨眼间的美妙展现得淋漓尽致！<br />更能AI
          精准分析视频内容，15个场景智能匹配背景音效。
        </p>
        <div class="video-bg" @click="playVideo"></div>
        <div class="video-box" v-show="showSlide">
          <div class="overlay" @click="closeVideo"></div>
          <div class="video" v-bind:class="showSlide">
            <span class="icon-close" @click="closeVideo"></span>
            <video
              ref="VideoDom"
              src="/imgs/product/video.mp4"
              muted
              autoplay
              controls="controls"
            ></video>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
export default {
  name: 'product',
  components: {
    Swiper,
    SwiperSlide
  },
  data () {
    return {
      showSlide: '', // 控制动画效果
      product: {}, // 商品信息
      swiperOption: {
        autoplay: true,
        slidesPerView: 3,
        spaceBetween: 30,
        freeMode: true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        }
      }
    }
  },
  mounted () {
    this.getProductInfo()
  },
  methods: {
    playVideo () {
      this.showSlide = 'slideDown'
      this.$refs.VideoDom.play()
    },
    closeVideo () {
      this.showSlide = 'slideUp'
      this.$refs.VideoDom.pause()
      setTimeout(() => {
        this.showSlide = ''
      }, 600)
    },
    getProductInfo () {
      // 获取路由的id
      const id = this.$route.params.id
      this.$axios.get(`/products/${id}`).then((res) => {
        this.product = res.data
      })
    },
    buy () {
      // 获取路由的id
      const id = this.$route.params.id
      this.$router.push(`/detail/${id}`)
    }
  }
}
</script>
<style lang="scss">
@import './../assets/scss/mixin.scss';
@import './../assets/scss/product.scss';
</style>
